<?php include_once 'template/header_light.php'; ?>
<script type="text/javascript">
    // 参考：http://www.cnblogs.com/qjqcs/p/5852958.html
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    var label = document.getElementById("chart_title");
    var chart_title = label.innerHTML;    
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption({
        title: {
            text: chart_title,
            left: 'left' //标题居中 
        },
        tooltip: {},
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false}, //  数据视图
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true}, //  刷新
                saveAsImage: {show: true}, //  下载为图片
                right: '5%',
            }
        },
        legend: {
            data: ['新增用户', '取消用户', '净增用户']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        dataZoom: [
            {
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                filterMode: 'filter', // 设定为 'filter' 从而 X 的窗口变化会影响 Y 的范围。
                start: 60,
                end: 100
            },
        ],
        series: [
            {
                "type": "bar",
                "data": []
            }
        ]
    });

    var arr1 = [], arr2 = [], arr3 = [], arr4 = [];
    function jsonData() {
        $.ajax({
            type: "post",
            async: false, // false为同步执行，true为异步执行
            url: "data/user_summary.php",
            data: {},
            dataType: "json",
            success: function (result) {
                if (result) {
                    arr1 = result.ref_date;
                    arr2 = result.new_user;
                    arr3 = result.cancel_user;
                    arr4 = result.net_user;
                    option = {
                        xAxis: {
                            data: arr1
                        },
                        series: [
                            {
                                name: '新增用户',
                                data: arr2,
                                type: 'bar',
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                    }
                                },
                            },
                            {
                                name: '取消用户',
                                type: 'bar',
                                data: arr3,
                                stack: '总量',
                                label: {
                                    normal: {
                                        show: true,
                                    }
                                },
                            },
                            {
                                name: '净增用户',
                                type: 'bar',
                                data: arr4,
                                label: {
                                    normal: {
                                        show: true,
//                                        position: 'top'
                                    }
                                },
                            },
                        ]
                    }
                    // 填入数据
                    myChart.setOption(option);
                }
            }
        })
    }
    //  首次加载，初始化数据
    jsonData();
</script>    
<?php include_once 'template/footer.php'; ?>